<template>
    <div class="quesion_back" title="问题反馈">
        <el-icon @click="submitBefore"><Comment /></el-icon>
        <el-dialog v-model="modalShow" title="意见反馈" width="440" 
            draggable append-to-body align-center :close-on-click-modal="false" :before-close="modalClose">
            <el-form ref="formRef" :model="form" :rules="formRules" label-position="top" >
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="平台" prop="systemId">
                            <DataDicSelect v-model:value="form.systemId" valueType="dictCode"
                                dicName="sys_system_type" label="平台" 
                                :multiple="false" @select="selectSystem"></DataDicSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="模块/类型" prop="modelId">
                            <el-select v-model="form.modelId" :disabled="modelSelectDisabled" placeholder="请选择模块/类型"> 
                                <el-option v-for="item in modelOptions" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="反馈内容" prop="feedbackContent">
                            <el-input v-model="form.feedbackContent" type="textarea" placeholder="请输入反馈内容" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="flex flex-end">
                    <el-button type="default" @click="modalClose">取 消</el-button>
                    <el-button type="primary" @click="submit">提 交</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
    import { ref } from "vue"
    import { getMenuTreeBySysName, submitQuestion } from "@/api/system/userfeedback";
    import { ElMessage } from 'element-plus'
    import { Comment } from '@element-plus/icons-vue'
    import DataDicSelect from "@/components/DataComponents/DataDicSelect.vue"
    const { proxy } = getCurrentInstance();
    const modalShow = ref<boolean>(false);
    const namespace = ref<string>('');
    const form = ref<{ systemId:string|null, modelId:string|null, feedbackContent: string|number }>({
        systemId: null,
        modelId: null,
        feedbackContent: ''
    });
    const formRules = ref<any>({
        feedbackContent: { required: true, trigger: ['blur'], message: '请输入反馈内容', },
        systemId: { required: true, trigger: ['blur'], message: '请选择反馈平台', },
        modelId: { required: true, trigger: ['blur'], message: '请选择模块/类型', },
    });
    const modelOptions = ref<any>([]);
    const modelSelectDisabled = ref<boolean>(true);
    const selectSystem = (value: string | number | null, options:any) => {
        namespace.value = options[0] ? options[0].dictValue : '' ;
        modelSelectDisabled.value = value ? false : true;
        if(namespace.value){
            getmodelList();
        }
    };
    const submitBefore = () => {
        modalShow.value = true;
    };
    const submit = () => {
        submitQuestion({
            ...form.value
        }).then((res) => {
            ElMessage({ type: 'success', message: '问题反馈提交成功', })
            modalClose();
        });
    };
    const modalClose = () => {
        form.value = {
            systemId: null,
            modelId: null,
            feedbackContent: ''
        }
        modalShow.value = false;
        proxy.resetForm("formRef");
    };
    const getmodelList = () => {
        getMenuTreeBySysName({
            sysType: namespace.value
        }).then((res) => {
            const modelList = res.data ? res.data : [];
            modelOptions.value = [];
            modelList.map((item:any) => {
                modelOptions.value.push({
                    label: item.menuName,
                    value: item.menuId
                });
            });
        });
    };
</script>
<style scoped lang="scss">
    .quesion_back{
        padding-top: 4px;
        box-sizing: border-box;
        i{
            font-size: 22px;
            margin-right: 5px;
            color: #555;
            cursor: pointer;
        }
    }
</style>